<app-toolbar>
  <nz-space>
    <button *nzSpaceItem nz-button nzType="primary" (click)="reload()">
      <i nz-icon nzType="reload" [nzSpin]="loading"></i>
      刷新
    </button>
    <app-search-box *nzSpaceItem (onSearch)="search($event)"></app-search-box>
    <button *nzSpaceItem nz-button nzType="primary" (click)="handleEdit()">
      <i nz-icon nzType="plus"></i>
      新增
    </button>
    <button nz-button nzType="primary" *nzSpaceItem class="btn">
      <span nz-icon nzType="cloud-download" nzTheme="outline"></span>
      <a (click)="handleExport()" download="filename" [href]="href">导出</a>
    </button>
    <app-import *nzSpaceItem [url]="'role/import'"></app-import>

    <button *nzSpaceItem nz-button nzType="primary" nzDanger (click)="handleBatchDel()">
      批量删除
    </button>
  </nz-space>
</app-toolbar>

<ng-template #totalTemplate let-total>总共 {{ total }} 条</ng-template>
<nz-table #basicTable [nzData]="datum" [nzLoading]="loading" [nzScroll]="getTableHeight()" nzShowPagination
  [nzFrontPagination]="false" nzShowSizeChanger [nzTotal]="total" [nzShowTotal]="totalTemplate"
  (nzPageSizeChange)="pageSizeChange($event)" (nzPageIndexChange)="pageIndexChange($event)" [nzPageSize]="pageSize"
  [nzPageIndex]="pageIndex" (nzQueryParams)="onQuery($event)">
  <thead>
    <tr>
      <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="handleAllChecked($event)"></th>
      <th nzColumnKey="id" [nzSortFn]="true">id</th>
      <th nzColumnKey="name">名称</th>
      <th nzColumnKey="privileges">权限</th>
      <th nzColumnKey="created" [nzSortFn]="true">创建时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data; let i = index">
      <td [nzChecked]="setOfCheckedId.has(data.id)" (nzCheckedChange)="handleItemChecked(data.id, $event)"></td>
      <td>{{ data.id }}</td>
      <td>{{ data.name }}</td>
      <td>{{ data.privileges | handlePrivileges }}</td>
      <td>{{ data.created | date }}</td>
      <td>
        <a (click)="handleEdit(data.id)">
          <i nz-icon nzType="edit"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a nz-popconfirm nzPopconfirmTitle="确定删除?" (nzOnConfirm)="delete(data.id)" (nzOnCancel)="cancel()"
          nzPopconfirmPlacement="topLeft">
          <i nz-icon nzType="delete"></i>
        </a>
      </td>
    </tr>
  </tbody>
</nz-table>